Sorunsuz form gönderimi, ilerleme takibi ve gelişmiş kullanıcı deneyimi için React'in useFormStatus hook'unda ustalaşın. Sağlam ve kullanıcı dostu formlar oluşturmayı öğrenin.
React useFormStatus: Form Gönderim Durumu ve İlerleme Takibi İçin Kapsamlı Bir Rehber
Formlar, kullanıcı etkileşimi için birincil arayüz olarak hizmet veren sayısız web uygulamasının bel kemiğidir. Ancak, form gönderimlerini yönetmek, hataları işlemek ve kullanıcılara geri bildirim sağlamak karmaşık bir görev olabilir. React'in useFormStatus hook'u, form gönderim durumunu izlemek ve daha sezgisel bir kullanıcı deneyimi sağlamak için modern bir yol sunarak bu süreci basitleştirir.
useFormStatus Nedir?
React 18'de tanıtılan useFormStatus, bir <form> elemanının gönderim durumu hakkında bilgi sağlamak için tasarlanmış bir hook'tur. Bir formun o anda gönderilip gönderilmediğini, başarılı bir şekilde gönderilip gönderilmediğini veya gönderim sırasında bir hatayla karşılaşıp karşılaşmadığını belirlemenizi sağlar. Bu bilgi, kullanıcı arayüzünü güncellemek, düğmeleri devre dışı bırakmak, yükleme göstergeleri göstermek veya kullanıcıya hata mesajları sunmak için kullanılabilir.
useFormStatus Kullanmanın Temel Avantajları:
- Basitleştirilmiş Form Durum Yönetimi: Form gönderimi için manuel durum yönetimi ihtiyacını ortadan kaldırarak tekrar eden kodları (boilerplate) azaltır.
- Geliştirilmiş Kullanıcı Deneyimi: Form gönderimi sırasında kullanıcılara gerçek zamanlı geri bildirim sağlayarak kullanılabilirliği artırır.
- Artırılmış Erişilebilirlik: Gönderim sırasında form elemanlarını devre dışı bırakarak ve net hata mesajları sağlayarak erişilebilir form etkileşimlerine olanak tanır.
- Optimize Edilmiş Performans: Form gönderim durumunu verimli bir şekilde izleyerek gereksiz yeniden render işlemlerini önler.
useFormStatus Nasıl Çalışır?
useFormStatus hook'u, bir <form> elemanını render eden bir React bileşeni içinde kullanılır. Hook, aşağıdaki özellikleri içeren bir nesne döndürür:
pending: Formun o anda gönderilip gönderilmediğini belirten bir boolean değer.data: Formun action fonksiyonu tarafından (başarılı olursa) döndürülen veri.method: Form gönderimi için kullanılan HTTP metodu (örneğin, "POST", "GET").action: Form gönderildiğinde çağrılan fonksiyon.error: Form gönderimi başarısız olursa bir hata nesnesi.
useFormStatus'ı kullanmak için öncelikle formunuz için bir action fonksiyonu tanımlamanız gerekir. Bu fonksiyon, form gönderildiğinde çağrılacaktır. action fonksiyonu içinde gerekli veri işleme, doğrulama veya API çağrılarını gerçekleştirebilirsiniz. action fonksiyonu, useFormStatus hook'unun data özelliğinde mevcut olacak bir değer döndürmelidir. Eğer eylem bir hata fırlatırsa, bu hata error özelliğinde mevcut olacaktır.
useFormStatus için Pratik Örnekler
Örnek 1: Temel Form Gönderim Takibi
Bu örnek, basit bir iletişim formunun gönderim durumunu izlemek için useFormStatus'ın nasıl kullanılacağını göstermektedir. Bu örnek, Next.js veya Remix gibi bir framework gerektiren bir React Sunucu Bileşeninde (RSC) çalışır.
// app/contact/page.tsx (Next.js)
'use client';
import { useFormStatus } from 'react-dom';
async function submitForm(formData: FormData) {
"use server";
// Bir API çağrısını simüle et
await new Promise((resolve) => setTimeout(resolve, 2000));
const name = formData.get('name') as string;
const email = formData.get('email') as string;
const message = formData.get('message') as string;
if (!name || !email || !message) {
throw new Error('Lütfen tüm alanları doldurun.');
}
console.log('Form Verisi:', { name, email, message });
return { message: 'Form başarıyla gönderildi!' };
}
export default function ContactForm() {
const { pending, data, error } = useFormStatus();
return (
);
}
Bu örnekte, pending durumu, form gönderilirken form girdilerini ve gönder düğmesini devre dışı bırakmak için kullanılır. Ayrıca kullanıcıya görsel geri bildirim sağlamak için düğme metnini dinamik olarak "Gönderiliyor..." olarak değiştirir. Başarılı olduğunda, submitForm eyleminden gelen data görüntülenir. Gönderim sırasında bir hata oluşursa, error mesajı kullanıcıya gösterilir.
Örnek 2: Bir Yükleme Göstergesi Görüntüleme
Bu örnek, form gönderilirken bir yükleme göstergesinin nasıl görüntüleneceğini gösterir. Bu, özellikle uzun süren API çağrıları veya karmaşık veri işleme içeren formlar için kullanışlıdır.
// Örnek 1 ile benzer bileşen yapısı
export default function ContactForm() {
const { pending, data, error } = useFormStatus();
return (
);
}
Bu örnekte, pending durumu doğru olduğunda basit bir "Yükleniyor..." mesajı görüntülenir. Bunu bir spinner veya ilerleme çubuğu gibi daha gelişmiş bir yükleme göstergesiyle değiştirebilirsiniz.
Örnek 3: Form Doğrulama Hatalarını Ele Alma
Bu örnek, useFormStatus kullanarak form doğrulama hatalarının nasıl ele alınacağını gösterir. action fonksiyonu doğrulama yapar ve herhangi bir doğrulama kuralı ihlal edilirse bir hata fırlatır.
// Örnek 1 ile benzer bileşen yapısı
async function submitForm(formData: FormData) {
"use server";
const name = formData.get('name') as string;
const email = formData.get('email') as string;
const message = formData.get('message') as string;
if (!name) {
throw new Error('Ad alanı zorunludur.');
}
if (!email) {
throw new Error('E-posta alanı zorunludur.');
}
if (!message) {
throw new Error('Mesaj alanı zorunludur.');
}
// Bir API çağrısını simüle et
await new Promise((resolve) => setTimeout(resolve, 2000));
console.log('Form Verisi:', { name, email, message });
return { message: 'Form başarıyla gönderildi!' };
}
export default function ContactForm() {
const { pending, data, error } = useFormStatus();
return (
);
}
Bu örnekte, action fonksiyonu ad, e-posta ve mesaj alanlarının boş olup olmadığını kontrol eder. Bu alanlardan herhangi biri boşsa, ilgili bir mesajla bir hata fırlatır. useFormStatus hook'unun error özelliği daha sonra kullanıcıya hata mesajını göstermek için kullanılır.
Gelişmiş Kullanım Senaryoları ve Dikkat Edilmesi Gerekenler
Üçüncü Taraf Form Kütüphaneleriyle Entegrasyon
useFormStatus, form gönderim durumunu izlemek için yerel bir çözüm sunarken, Formik veya React Hook Form gibi üçüncü taraf form kütüphaneleriyle de entegre edilebilir. Bu kütüphaneler form doğrulama, alan yönetimi ve durum yönetimi gibi daha gelişmiş özellikler sunar. useFormStatus'ı bu kütüphanelerle birleştirerek, son derece özelleştirilebilir ve sağlam formlar oluşturabilirsiniz.
Formik veya React Hook Form ile entegre olmak için, ilgili form gönderim işleyicilerinden yararlanabilir ve genel gönderim durumunu izlemek için useFormStatus'ı kullanabilirsiniz. Muhtemelen yine de bir Sunucu Eylemi (Server Action) oluşturmanız gerekecektir, ancak istemci tarafı form durum yönetimi seçilen kütüphane tarafından ele alınacaktır.
Asenkron İşlemleri Ele Alma
Birçok form, API çağrıları veya veritabanı sorguları gibi asenkron işlemler içerir. Asenkron işlemlerle uğraşırken, form gönderiminin doğru bir şekilde ele alındığından ve kullanıcıya uygun geri bildirim sağlandığından emin olmak önemlidir. useFormStatus hook'u, formun bir asenkron işlemin tamamlanmasını beklediğini belirtmek için kullanılabilecek bir pending durumu sağlayarak bu süreci basitleştirir.
Asenkron işlemler sırasında oluşabilecek hataları zarif bir şekilde ele almak için sağlam bir hata işleme mekanizması uygulamak da çok önemlidir. useFormStatus hook'unun error özelliği, kullanıcıya hata mesajları göstermek için kullanılabilir.
Erişilebilirlik Hususları
Erişilebilirlik, web geliştirmenin kritik bir yönüdür ve formlar da bir istisna değildir. Formlar oluştururken, engelli kullanıcılar için erişilebilir olduklarından emin olmak önemlidir. useFormStatus hook'u, form erişilebilirliğini artırmak için şu şekillerde kullanılabilir:
- Gönderim sırasında form elemanlarını devre dışı bırakma: Bu, kullanıcıların formu yanlışlıkla birden çok kez göndermesini önler.
- Net hata mesajları sağlama: Hata mesajları kısa, bilgilendirici ve kolayca anlaşılır olmalıdır. Ayrıca ARIA nitelikleri kullanılarak ilgili form alanlarıyla ilişkilendirilmelidirler.
- ARIA niteliklerini kullanma: ARIA nitelikleri, yardımcı teknolojilere form ve elemanları hakkında ek bilgi sağlamak için kullanılabilir. Örneğin,
aria-describedbyniteliği, hata mesajlarını form alanlarıyla ilişkilendirmek için kullanılabilir.
Performans Optimizasyonu
useFormStatus genellikle verimli olsa da, karmaşık formlar oluştururken performans etkilerini göz önünde bulundurmak önemlidir. useFormStatus'ı kullanan bileşen içinde pahalı hesaplamalar veya API çağrıları yapmaktan kaçının. Bunun yerine, bu görevleri action fonksiyonuna devredin.
Ayrıca, gereksiz yeniden render işlemlerine dikkat edin. Bileşenlerin prop'ları değişmedikçe yeniden render olmasını önlemek için React'in hafızaya alma (memoization) tekniklerini (örneğin, React.memo, useMemo, useCallback) kullanın.
useFormStatus Kullanımı İçin En İyi Uygulamalar
actionfonksiyonlarınızı kısa ve odaklı tutun:actionfonksiyonu öncelikle veri işleme, doğrulama ve API çağrılarını ele almalıdır.actionfonksiyonu içinde karmaşık kullanıcı arayüzü güncellemeleri veya diğer yan etkileri yapmaktan kaçının.- Kullanıcılara net ve bilgilendirici geri bildirim sağlayın: Form gönderimi sırasında kullanıcılara gerçek zamanlı geri bildirim sağlamak için
useFormStatushook'ununpending,dataveerrorözelliklerini kullanın. - Sağlam hata işleme uygulayın: Form gönderimi sırasında oluşabilecek hataları zarif bir şekilde ele alın ve kullanıcıya bilgilendirici hata mesajları sağlayın.
- Erişilebilirliği göz önünde bulundurun: Erişilebilirlik en iyi uygulamalarını takip ederek formlarınızın engelli kullanıcılar için erişilebilir olduğundan emin olun.
- Performansı optimize edin:
useFormStatus'ı kullanan bileşen içinde gereksiz yeniden render işlemlerinden ve pahalı hesaplamalardan kaçının.
Dünya Çapında Gerçek Hayat Uygulamaları ve Örnekler
useFormStatus hook'u, farklı endüstrilerde ve coğrafi konumlarda çeşitli form tabanlı senaryolara uygulanabilir. İşte birkaç örnek:
- E-ticaret (Global): Bir çevrimiçi mağaza, sipariş formlarının gönderimini izlemek için
useFormStatuskullanabilir.pendingdurumu, sipariş işlenirken "Siparişi Ver" düğmesini devre dışı bırakmak için kullanılabilir veerrordurumu, siparişin gönderilememesi durumunda (örneğin, ödeme sorunları veya stok yetersizliği nedeniyle) hata mesajları görüntülemek için kullanılabilir. - Sağlık Hizmetleri (Avrupa): Bir sağlık hizmeti sağlayıcısı, hasta kayıt formlarının gönderimini izlemek için
useFormStatuskullanabilir.pendingdurumu, hastanın bilgileri işlenirken bir yükleme göstergesi görüntülemek için kullanılabilir vedatadurumu, başarılı kayıt üzerine bir onay mesajı görüntülemek için kullanılabilir. GDPR (Genel Veri Koruma Yönetmeliği) ile uyumluluk esastır ve veri gizliliği ihlalleriyle ilgili hata mesajları dikkatle ele alınmalıdır. - Eğitim (Asya): Bir çevrimiçi öğrenme platformu, ödev yüklemelerinin gönderimini izlemek için
useFormStatuskullanabilir.pendingdurumu, ödev yüklenirken "Gönder" düğmesini devre dışı bırakmak için kullanılabilir veerrordurumu, yüklemenin başarısız olması durumunda (örneğin, dosya boyutu sınırlamaları veya ağ sorunları nedeniyle) hata mesajları görüntülemek için kullanılabilir. Farklı ülkelerin farklı akademik standartları ve gönderim gereksinimleri olabilir ve formun bunlara uyum sağlaması gerekir. - Finansal Hizmetler (Kuzey Amerika): Bir banka, kredi başvuru formlarının gönderimini izlemek için
useFormStatuskullanabilir.pendingdurumu, başvuru işlenirken bir yükleme göstergesi görüntülemek için kullanılabilir vedatadurumu, kredi onay durumunu görüntülemek için kullanılabilir. Finansal düzenlemelerle (örneğin, KYC - Müşterini Tanı) uyumluluk çok önemlidir ve uyumluluk sorunlarıyla ilgili hata mesajları net ve spesifik olmalıdır. - Devlet Hizmetleri (Güney Amerika): Bir devlet kurumu, vatandaş geri bildirim formlarının gönderimini izlemek için
useFormStatuskullanabilir.pendingdurumu, geri bildirim işlenirken "Gönder" düğmesini devre dışı bırakmak için kullanılabilir vedatadurumu, başarılı gönderim üzerine bir onay mesajı görüntülemek için kullanılabilir. Vatandaşların farklı dijital okuryazarlık seviyeleri ve teknolojiye erişimleri olabileceğinden erişilebilirlik kritiktir. Formun birden çok dilde mevcut olması gerekir.
Sık Karşılaşılan Sorunları Giderme
useFormStatusgüncellenmiyor: React 18 veya üstünü kullandığınızdan ve formunuzun düzgün bir şekilde tanımlanmış biraction'a sahip olduğundan emin olun. Sunucu Eyleminizin (Server Action)"use server"yönergesiyle doğru bir şekilde tanımlandığını doğrulayın.- Hata mesajları görüntülenmiyor:
actionfonksiyonunuzun hataları doğru bir şekilde fırlattığını ve bileşeninizdeerror.message'ı görüntülediğinizi iki kez kontrol edin. Form gönderimi sırasında konsolda herhangi bir hata olup olmadığını inceleyin. - Form birden çok kez gönderiliyor: Yanlışlıkla çift tıklamaları önlemek için gönder düğmenizin
pendingdurumu kullanılarak devre dışı bırakıldığından emin olun.
Sonuç
React'in useFormStatus hook'u, form gönderim durumunu izlemek ve daha iyi bir kullanıcı deneyimi sağlamak için güçlü ve kullanışlı bir yol sunar. Form durum yönetimini basitleştirerek, erişilebilirliği artırarak ve performansı optimize ederek, useFormStatus geliştiricilere sağlam ve kullanıcı dostu formlar oluşturma gücü verir. Yeteneklerini ve en iyi uygulamalarını anlayarak, React uygulamalarınızda sorunsuz ve ilgi çekici form etkileşimleri oluşturmak için useFormStatus'tan yararlanabilirsiniz.